"use server";
import "./index.css";
import Title from "antd/es/typography/Title";
import {
  Avatar,
  Button,
  Card,
  Divider,
  Flex,
  Menu,
  message,
  Typography,
} from "antd";
import Link from "next/link";
import { userLoginUsingPost } from "@/api/userController";
import { setLoginUser } from "@/stores/loginUser";
import {
  getQuestionBankVoByIdUsingGet,
  listQuestionBankVoByPageUsingPost,
} from "@/api/questionBankController";
import {
  getQuestionVoByIdUsingGet,
  listQuestionVoByPageUsingPost,
} from "@/api/questionController";
import QuestionBankList from "@/components/QuestionBankList";
import React from "react";
import QuestionList from "@/components/QuestionList";
import Meta from "antd/es/card/Meta";
import Paragraph from "antd/es/typography/Paragraph";
import Sider from "antd/es/layout/Sider";
import { Content } from "antd/es/layout/layout";
import QuestionCard from "@/components/QuestionCard";

/**
 * 题库题目详情页
 * @constructor
 */

export default async function BankQuestionPage({ params }) {
  const { quesitonBankId, questionId } = params;
  //获取题库详情
  let bank = undefined;
  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: quesitonBankId,
      needQueryQuestionList: true,
      pageSize: 200,
    });
    bank = res.data;
  } catch (e) {
    message.error("获取题库列表失败，" + (e as Error).message);
  }
  //错误处理
  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>;
  }

  //获取题目详情
  let question = undefined;
  try {
    const res = await getQuestionVoByIdUsingGet({
      id: questionId,
    });
    question = res.data;
  } catch (e) {
    message.error("获取题目列表失败，" + (e as Error).message);
  }
  //错误处理
  if (!question) {
    return <div>获取题目详情失败，请刷新重试</div>;
  }

  //题目菜单列表
  const questionMenuItemList = (bank.questionPage?.records || []).map((q) => {
    return {
      label:
      //跳转到当前窗口选中的题目
        <Link href={`/bank/${quesitonBankId}/question/${q.id}`}>
          {q.title}
        </Link>
      ,
      key: q.id,
    };
  });

  return (
    <div id="BankQuestionPage">
      <Flex gap={24}>
        <Sider width={240} theme={"light"} style={{ padding: "24px 0" }}>
          <Title level={4} style={{ padding: "0 20px" }}>
            {bank.title}
          </Title>
          <Menu items={questionMenuItemList} selectedKeys={[question.id]}/>
        </Sider>
        <Content>
          <QuestionCard question={question} />
        </Content>
      </Flex>
    </div>
  );
}
